<template>
    <div class="form">
        <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="表格排版" prop="typesetting">
                <el-input-number v-model="num" controls-position="right" @change="handleChange($event, 'row')" :min="1"
                    :max="10" class="number">
                </el-input-number>
                <el-input-number v-model="num1" controls-position="right" @change="handleChange($event, 'col')" :min="1"
                    :max="10" class="number">
                </el-input-number>
            </el-form-item>
            <el-form-item label="表格内容" prop="content">
                <div class="label-box" v-for="(t,i) in list" :key="i">
                    <el-input type="textarea" autosize v-model="form.content" v-for="(T,I) in listchilrd" :key="I"
                        class="input" style="display: block;" />
                    <br>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
/**
* description: 表格模块
*/
export default {
    // 你开下f12看看consle
    data() {
        return {
            form: {
                typesetting: '',
                content: ''
            },
            num: 1,
            num1: 1,
            flexStyle: '',
            list: [''],
            listchilrd: ['']
        }
    },
    methods: {
        handleChange(_, value) {
            console.log(value)
            if (value == 'row') {
                this.listchilrd.push('')
            } else {
                this.list.push('')
            }

            this.flexStyle = value
        },
    }
}
</script>
<style lang="scss" scoped>
.label-box {
    float: left;
    margin-right: -1px;
    .number{
        width: 0;
    }
    .input {
        width: 188px !important;
    }
}

::v-deep .el-textarea__inner {
    margin-bottom: -1px;
    border-radius: 0;
}

::v-deep .el-input--small {
    width: 130px !important;
}
.el-input-number {
    :deep(.el-input-number__decrease) {
        border-left: 0;
        background: #fff;
        // font-size: 20px;
    }
}

.el-input-number {
    :deep(.el-input-number__increase) {
        border-left: 0;
        border-bottom: 0;
        background: #fff;
        // font-size: 20px;
        // line-height: 25px;
    }
}
</style>